<template>
  <div class="popup" :class="className" v-show="visible">
    <p class="popup-msg" :class="customClass">
      {{message}}
    </p>
  </div>
</template>
<script>
import detect from '@/libs/detect';

export default {

  name: 'popup',

  props: {
    type: {
      type: String,
      default: 'default',
      validator(value) {
        if (!value) {
          return true;
        }

        const typeList = ['default', 'success', 'error', 'warn'];

        return typeList.indexOf(value) > -1;
      }
    },

    message: {
      type: String,
      default: ''
    },

    duration: {
      type: Number,
      default: 2000
    }
  },
  data() {
    return {
      visible: false
    };
  },

  computed: {
    customClass() {
      return `popup-type-${this.type}`;
    },

    className() {
      // const { browser } = detect;
      // if (browser.weixin || browser.weibo || browser.qq) {
      //   return 'no-top';
      // }

      return 'no-top';
    }
  }
};

</script>
<style lang="scss">
@import '../../assets/scss/function';

.popup {
  position: fixed;
  top: $barHeight;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: $bodyWidth;
  z-index: $zIndexPopup;
}

.popup.no-top {
  top: 0;
}

.popup-msg {
  padding: 15px 30px;
  line-height: 1.5;
  text-align: center;
  font-size: 28px;
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
}

.popup-type-default {
  background-color: #666;
}

.popup-type-success {
  background-color: #55db71;
}

.popup-type-error {
  background-color: #f37b94;
}

.popup-type-warn {
  background-color: #ffc107;
}
</style>

